<template>
  <div>
    <!-- 第二部分 -->
    <div class="log">
      <h1>登录一下</h1>

    </div>
    <!-- 第三部分 -->
    <div class="btn">
      <van-tabs v-model="active">
        <van-tab title="账号密码登录">
          <main>
            <div class="form">
              <van-form validate-first @failed="onFailed" submit-on-enter>
                <!-- 通过 pattern 进行正则校验 -->
                <van-field maxlength="11" label="手机号：" required v-model="phone" name="pattern" placeholder="请输入手机号"
                  :rules="[{ pattern, message: '请输入正确手机号' }]" />
                <van-field minlength="6" label="密码：" required v-model="password" name="validator" placeholder="请输入密码"
                  :rules="[{ validator, message: '密码不少于6位' }]" />
                <div style="margin: 16px;" class="btn">
                  <van-button round block type="info" native-type="submit" @click="submit" class="submit">登录</van-button>
                </div>
              </van-form>
            </div>
          </main>
        </van-tab>
        <van-tab class="zxc" title="手机号登陆">
          <van-field v-model="phone" required label="手机号" placeholder="请输入手机号" class="sams" />
          <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
            <template #button>
              <van-button size="large" type="primary" @click="handleClick()">发送验证码</van-button>
            </template>
          </van-field>
          <van-button size="large" type="primary" @click="handleClick1()">登录</van-button>

        </van-tab>
      </van-tabs>

    </div>

    <!-- 第四部分 -->

  </div>
</template>

<script>
import axios from 'axios';
// import { Toast } from 'vant';
import Vue from 'vue';
import { Form, Toast } from 'vant';
import { Field } from 'vant';


Vue.use(Form);
Vue.use(Field)
export default {
  data() {
    return {
      phone: '',
      password: '',
      pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,

      phone: '',
      sms: '',
      active: 2,
      checked: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '√勾选后在登录' }],
      showPopover: true,
      username: '',
      password: '',
      arr: [],
      list: [
        {
          username: 'admin',
          password: '123456'
        }
      ]
    }
  },
  methods: {
    validator(password) {
      return /^\d{6}$/.test(password);
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    async submit() {
      console.log(this.phone, this.password);
      let res = await axios({
        url: 'http://192.168.20.106:8000/api/login',
        method: 'post',
        data: {
          phone: this.phone,
          password: this.password
        }
      })
      console.log(res, '0000');
      if (res.data.code == 200) {
        this.$store.commit('SET_USER', res.data)
        this.$router.push({ path: '/index' })
      } else {
        Toast('账号密码错误')
      }
    },

    onSelect(action) {
      console.log(action);
    },
    onChange() {
      // console.log(1);
      this.showPopover = !this.showPopover
    },


    async handleClick() {
      axios({
        url: "http://192.168.20.106:8000//api/sms",
        data: {
          "phone": "18309893168",
        },
        method: "post",
      }).then((res) => {
        console.log(res);
      })

    },
    async handleClick1() {
      axios({
        url: "http://192.168.20.106:8000/api/sms/login",

        data: {

          "phone": this.phone,
          "smsCode": this.sms
        },


        method: "post",
      }).then((res) => {
        console.log(res);
      })
      // if (res.data.code == 1) {

      //   console.log(1);
      //   if (!res.data.username) {
      //     localStorage.setItem("username", res.data.data.username)
      //   }
      //   this.$router.push({
      //     path: '/bookcity',
      //   })
      // } else {
      // }
    },
    retur() {
      this.$router.go(-1)
    }
  },
}
</script>

<style  scoped>
* {
  padding: 0;
  margin: 0;
}


.bottom {
  border: 0;
}

/* 第一部分 */
.close {
  width: 100%;
  height: 70px;
  color: #000;
  font-size: 16px;
  position: relative;
}

.close span {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #777;
}

/* 第二部分 */
.log {
  width: 100%;
  height: 130px;
}

.log h1 {
  /* font-size: 2px; */
  margin-left: 20px;
}

.log p {
  color: #424040e0;
  margin-left: 20px;
  margin-top: 10px;
}

/* 第三部分 */
.btn {
  width: 100%;
  height: 270px;
  text-align: center;
}

.asd {
  margin-top: 20px;
}

.sams {
  margin-top: 10px;
  margin-bottom: 10px;
}

.van-button {
  width: 80%;
  height: 40px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}

.radio {
  display: flex;
  margin-left: 33px;
}

.van-button {
  margin-top: 10px;
}



.zxc .van-button {
  font-size: 14px;
  font-weight: normal;
  border-radius: 0;
}

/* .van-tab__pane{
  height: 200px;
} */




/* 第四部分 */
.other {
  width: 100%;
  height: 24px;
  font-size: 16px;
  color: #e3e3e3;
  text-align: center;
  line-height: 40px;
}

.method {
  width: 100%;
  margin-top: 20px;
  height: 40px;
  text-align: center;
}

.method .van-icon {
  border: 1px solid #000;
  border-radius: 50%;
  padding: 5px;
  margin-right: 20px;
  margin-top: 8px;
}

.introduce {
  margin-top: 30px;
  text-align: center;
  font-size: 12px;
}
</style>